<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
		<!-- 配置样式 -->
		<style>
			/* 渲染没有完成时,就不展现 */
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="ap">
			<h1>{{hello}}</h1>
			<h3 v-cloak>{{hello}}</h3>
			<!-- 以优化后的效果进行展现  内部兼容了v-cloak -->
			<h3 v-text="msg"></h3>
			<!-- v-html 解析之后的效果进行展现 -->
			<h3 v-html="html"></h3>
			<!-- v-pre指令 跳过vue的解析的过程 -->
			<h3 v-pre>{{name}}</h3>
			<!-- v-once指令 元素只被解析一次-->
			<h3 v-once>{{once}}</h3>
			<!-- v-model 测试双向数据绑定 1.数据给用户展现的 2.用户需要传递数据服务器 -->
			<input name="model" v-model="model"/>	
		</div>
		<script src="../js/vue.js"></script>
			
		<script>
			const app=new Vue({
				el:'#ap',
				data:{
					hello:'VUE案例',
					msg:'测试v-text指令',
					html:'<h1>html效果展现</h1>',
					once:'测试解析的次数',
					model:'测试双向数据绑定' 
				}
				
			})
		</script>
	</body>
</html>
